document.addEventListener('DOMContentLoaded', async() => {
    //保证dom内容是加载完了，不等待图片css资源的加载，性能高
    // const token = localStorage.getItem('user-token')
    const { data } = await axios.get('/dashboard')

    // console.log(data.overview)
    // 循环遍历
    for (const key in data.overview) {
        document.querySelector(`[name=${key}]`).innerHTML = data.overview[key]
    }

    //调用函数 2021全学科薪资走势
    initYearChart(data.year)

    // 薪资分布
    initSalaryChart(data.salaryData)

    // 每组薪资
    initGroupChart(data.groupData)

    //渲染男女薪资分布
    initSalaryPieChart(data.salaryData)

    //渲染地图
    initMapChart(data.provinceData)
})


//封装一个 渲染2021全学科薪资走势
const initYearChart = (year) => {
    // 1.基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#line'))

    // 2.指定图表的配置项和数据
    const option = {
        // 标题组件
        title: {
            show: true, // 标题是否显示
            text: '2021全学科薪资走势',
            textStyle: {
                color: 'black',
                fontSize: 16
            },
            left: 'center',
            top: 10 // 距离顶部的距离
        },
        xAxis: {
            type: 'category',
            // data: ['一月', '二月', '三月', '四月', '五月', '六月'],
            data: year.map(item => item.month),
            // x轴轴线
            axisLine: {
                lineStyle: {
                    color: 'green',
                    type: 'dashed' // 虚线
                }
            },
            // x轴刻度
            axisLabel: {
                show: true,
                color: 'pink'
            }
        },
        yAxis: {
            type: 'value',
            splitNumber: 5,
            splitLine: { // 区域中的分隔线。
                show: true,
                lineStyle: { // 分隔线的样式
                    color: ['skyblue', 'pink', 'yellow'],
                    type: 'dashed' // 虚线
                }
            }
        },
        // 提示框组件
        tooltip: {
            trigger: 'axis' // 坐标轴触发
        },
        // grid 绘制网格
        grid: {
            left: '10%',
            top: '20%'
        },
        // color 调色盘 支持渐变
        color: [
            // 线性渐变
            {
                type: 'linear',
                // (x,y) -> (x2,y2)
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'skyblue' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'pink' // 100% 处的颜色
                }],
                global: false // 缺省为 false 如果配置成 true，则xy表示具体的坐标
            }
        ],
        series: [{
            //data: [820, 932, 901, 934, 1290, 1330],
            data: year.map(item => item.salary),
            type: 'line',
            symbolSize: 20, //标记的大小
            symbol: 'pin', // 标记的图形
            lineStyle: {
                width: 2 // 线的粗细
            },
            smooth: true, // 区域填充样式
            // 区域填充样式
            areaStyle: {
                color: {
                    // 线性渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255,144,38,0.7)' // 0% 处的颜色
                    }, {
                        offset: 0.8,
                        color: 'rgba(255,255,255,0.1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }]
    };

    // 3.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}

// 封装一个 渲染2021全学科薪资分布 饼图
const initSalaryChart = (salaryData) => {
    // 1.基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#salary'))

    // 2.指定图表的配置项和数据
    const option = {
        // 标题
        title: {
            text: '班级薪资分布',
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 16
            }
        },
        // 提示框
        tooltip: {
            trigger: 'item'
        },
        // 图例组件
        legend: {
            bottom: '6%', // 居底
            left: 'center' // 水平居中
        },
        //调色盘，修改配色  饼图从时钟12点位置，开始配色
        color: ['#fda224', '#5097ff', '#39bbf9', '#34d39a'],
        // 数据项
        series: [{
            name: '班级薪资分布', // 鼠标悬停数据表示名
            type: 'pie', // 类型饼图
            center: ['50%', '45%'], //圆心坐标
            radius: ['50%', '65%'], //内圆半径和外圆半径

            // 每一项的样式
            itemStyle: {
                borderRadius: 12, // 圆角
                borderColor: '#fff', // 边框颜色
                borderWidth: 4
            },
            label: {
                show: false, // 文字说明，默认不显示
                position: 'center' // 文字中间显示
            },
            // 控制文字样式效果
            emphasis: {
                label: {
                    show: true,
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            // 文字和item项的线
            labelLine: {
                show: false
            },
            /*  data: [
                 { value: 200, name: '1万以下' },
                 { value: 735, name: '1万~1.5万' },
                 { value: 580, name: '1.5万~2.0万' },
                 { value: 484, name: '2.0万~2.5万' },

             ] */
            data: salaryData.map(item => {
                return {
                    value: item.g_count + item.b_count,
                    name: item.label
                }
            })
        }]
    };

    // 3.使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}

// 渲染班级每组薪资
const initGroupChart = (groupData) => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('lines'))

    const option = {
        grid: {
            left: 70,
            top: 30,
            right: 30,
            bottom: 50
        },
        xAxis: {
            type: 'category',
            data: groupData[1].map(item => item.name),
            axisLine: {
                show: true, //显示x轴轴线
                lineStyle: {
                    color: '#ccc', //轴线颜色
                    type: 'dashed' //虚线
                }
            },
            axisLabel: { //x轴刻度
                show: true,
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            //分割线配置
            splitNumber: 5,
            splitLine: {
                show: true,
                //分割线的样式
                lineStyle: {
                    //color: ['pink', 'skyblue', 'orange'], //线的颜色
                    color: '#ccc', //线的颜色
                    type: 'dashed' //虚线
                }
            }
        },
        color: [{ // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: 'rgba(61, 213, 158, 1)' // 0% 处的颜色
            }, {
                offset: 1,
                color: 'rgba(204, 244, 229,0.6)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }, {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: 'rgba(80, 162, 238, 1)' // 0% 处的颜色
            }, {
                offset: 1,
                color: 'rgba(205, 228, 250,0.6)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }],
        tooltip: {
            trigger: 'item'
        },
        series: [{
                name: '期望薪资',
                data: groupData[1].map(item => item.hope_salary),
                type: 'bar'
            },
            {
                name: '实际薪资',
                data: groupData[1].map(item => item.salary),
                type: 'bar'
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)

    // 点击切换 tab栏切换
    // 1. 利用事件委托，给按钮绑定点击事件
    // 2. 先找到 btn-blue 类的盒子去掉，再给当前点击的盒子加上 btn-blue的类
    const btns = document.querySelector('#btns')

    btns.addEventListener('click', function(e) {
        // console.log(e.target)
        if (e.target.tagName === 'BUTTON') {
            btns.querySelector('.btn-blue').classList.remove('btn-blue')
                // 给自己加上
            e.target.classList.add('btn-blue')

            // 获取组号 
            const group = e.target.innerHTML
                // console.log(group)
                // 1. 修改配置项
            option.xAxis.data = groupData[group].map(item => item.name)
            option.series[0].data = groupData[group].map(item => item.hope_salary)
            option.series[1].data = groupData[group].map(item => item.salary)
                //2.重新setOption
            myChart.setOption(option)
        }
    })
}

// 渲染男女薪资分布
const initSalaryPieChart = (salaryData) => {
    // 1. 初始化echarts 实例
    const myEchart = echarts.init(document.querySelector('#gender'))

    // 2.准备配置项
    const option = {
        title: [{
                text: '男女薪资分布',
                left: 10,
                top: 10,
                textStyle: {
                    fontSize: 16
                }
            },
            // 多个标题
            {
                text: '男生',
                left: 'center',
                top: '48%',
                textStyle: {
                    fontSize: 12
                }
            },
            {
                text: '女生',
                left: 'center',
                top: '88%',
                textStyle: {
                    fontSize: 12
                }
            }
        ],
        // 提示框
        tooltip: {
            trigger: 'item'
        },
        //调色器
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        // 数据项
        series: [{
                name: '男生',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '30%'],
                /*  data: [
                     { value: 1048, name: 'Search Engine' },
                     { value: 735, name: 'Direct' },
                     { value: 580, name: 'Email' },
                     { value: 484, name: 'Union Ads' }

                 ], */
                data: salaryData.map(item => {
                    return {
                        value: item.b_count,
                        name: item.label
                    }
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 28,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                name: '女生',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '70%'],
                /* data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' }

                ], */
                data: salaryData.map(item => {
                    return {
                        value: item.g_count,
                        name: item.label
                    }
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 28,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 3. 基于配置项渲染图标
    myEchart.setOption(option)
}

// 渲染地图
const initMapChart = (provinceData) => {
    const myEchart = echarts.init(document.querySelector('#map'))
        // 默认数据项
    const dataList = [
            { name: '南海诸岛', value: 0 },
            { name: '北京', value: 0 },
            { name: '天津', value: 0 },
            { name: '上海', value: 0 },
            { name: '重庆', value: 0 },
            { name: '河北', value: 0 },
            { name: '河南', value: 0 },
            { name: '云南', value: 0 },
            { name: '辽宁', value: 0 },
            { name: '黑龙江', value: 0 },
            { name: '湖南', value: 0 },
            { name: '安徽', value: 0 },
            { name: '山东', value: 0 },
            { name: '新疆', value: 0 },
            { name: '江苏', value: 0 },
            { name: '浙江', value: 0 },
            { name: '江西', value: 0 },
            { name: '湖北', value: 0 },
            { name: '广西', value: 0 },
            { name: '甘肃', value: 0 },
            { name: '山西', value: 0 },
            { name: '内蒙古', value: 0 },
            { name: '陕西', value: 0 },
            { name: '吉林', value: 0 },
            { name: '福建', value: 0 },
            { name: '贵州', value: 0 },
            { name: '广东', value: 0 },
            { name: '青海', value: 0 },
            { name: '西藏', value: 0 },
            { name: '四川', value: 0 },
            { name: '宁夏', value: 0 },
            { name: '海南', value: 0 },
            { name: '台湾', value: 0 },
            { name: '香港', value: 0 },
            { name: '澳门', value: 0 },
        ]
        // provinceData 后台返回的数据项,需要将后台返回的数据项，匹配设置给默认的数据项
        //遍历 dataList, 依次在后台返回的数据中找，看有没有相同 name的项，如果有，更新一下value
    dataList.forEach(item => {
        // 尝试拿 item.name 去  provinceData 数组中找对应项
        const obj = provinceData.find(v => {
                return v.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') === item.name
            })
            // 找到了，说明有这个省的同学，更新
        if (obj) {
            item.value = obj.value
        }
    })

    let option = {
        title: {
            text: '籍贯分布',
            top: 20,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [{
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
        }, ],
    }
    myEchart.setOption(option)
}